<template>
    <div class="main">
        <div class="left">
            <router-link :to="{name:'page1'}">page1</router-link>
            <router-link :to="{name:'page2'}">page2</router-link>
            <router-link to="/">page3</router-link>
            <router-link to="/">page4</router-link>
            <router-link to="/">page5</router-link>
        </div>
        <div class="right">
            
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
export default {
    name: 'VueAdmin',

   

    data() {
        return {
            
        };
    },

    mounted() {
        
    },

    methods: {
        
    },
};
</script>

<style >
@import  "~normalize.css";
.el-main{
    padding: 0;
}
.main{
    display: flex;
}
.left{
    width: 200px;
    height: calc(100vh - 60px);
    background-color: aqua;
}
.left a{
    display: block;
    width: 100%;
    height: 50px;
    text-align: center;
    border-bottom: 1px solid #000;
    line-height: 50px;
}
.left a.router-link-exact-active{
    background-color: brown;
}
.right{
background-color: cornsilk;
flex: 1;
}
</style>